<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">

        <el-row>
          <el-col :span="8">
            <el-form-item label="员工名称：" prop="userName">
              <el-input v-model="search.userName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="引用规则：" prop="ruleName">
              <el-input v-model="search.ruleName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期：" prop="statDate">
              <el-date-picker v-model="search.statDate" type="date" placeholder="选择日期"
                              value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="考勤工时状态：" prop="workHoursStatus">
              <el-select v-model="search.workHoursStatus" placeholder="请选择">
                <el-option
                  v-for="item in controlData.workHoursStatus"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="上班打卡状态：" prop="ondutySignStatus">
              <el-select v-model="search.ondutySignStatus" placeholder="请选择">
                <el-option
                  v-for="item in controlData.signStatus"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="下班打卡状态：" prop="offdutySignStatus">
              <el-select v-model="search.offdutySignStatus" placeholder="请选择">
                <el-option
                  v-for="item in controlData.signStatus"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
            <el-form-item style="margin-top: -2px">
              <el-button type="primary" @click="searchQuery">查询</el-button>
              <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      :formOptions="{ labelWidth: '120px' }"
      :isCustomForm="true"
      :showCheckbox="false"
      :showToolbar="false"
      :showView="false"
      :showMenu="false"
    >
      <qm-table-column field="userName">员工名称</qm-table-column>
      <qm-table-column field="ruleName">引用规则</qm-table-column>
      <qm-table-column field="statDate" width="100px">日期</qm-table-column>
      <qm-table-column field="ruleWorkHours" width="60px">考勤规定工时</qm-table-column>
      <qm-table-column field="workHoursCount" width="60px">实际考勤工时</qm-table-column>
      <qm-table-column field="leaveHoursCount" width="60px">请假/时</qm-table-column>
      <qm-table-column field="workHoursStatus" width="60px" :renderFunc="renderWorkHoursStatus">工时是否满足</qm-table-column>
      <qm-table-column field="ondutySignStatus" width="60px" :renderFunc="renderDutySignStatus">上班打卡状态</qm-table-column>
      <qm-table-column field="offdutySignStatus" width="60px" :renderFunc="renderDutySignStatus">下班打卡状态</qm-table-column>
      <qm-table-column field="ondutySignTime" width="100px" fieldtype="time">上班打卡时间</qm-table-column>
      <qm-table-column field="offdutySignTime" width="100px" fieldtype="time">下班打卡时间</qm-table-column>
      <qm-table-column field="dutySignCount" width="60px">考勤打卡次数</qm-table-column>
      <qm-table-column field="outworkSignCount" width="60px">外勤打卡次数</qm-table-column>
    </qm-table>
  </div>
</template>

<script>
  import Controller from "@/libs/framework/controller";

  export default class Instance extends Controller {
    onBeforeInit() {
      this.urls = {
        query: [{url: "/eip/sign/stat/query", method: "post"}],
        entity: "/eip/sign/stat/getEntity",
        model: "/eip/sign/stat/getListModel",
      };
    }

    mixin() {
      return {
        data() {
          return {
          }
        },
        methods: {
          renderWorkHoursStatus(data, row, column) {
            let find = this.super.$util.find(
              this.controlData.workHoursStatus,
              (item) => {
                return item.value === data;
              }
            );
            return (find || {}).key;
          },
          renderDutySignStatus(data, row, column) {
            let find = this.super.$util.find(
              this.controlData.signStatus,
              (item) => {
                return item.value === data;
              }
            );
            return (find || {}).key;
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
